<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set     -->
<!-- the browser's rendering engine into           -->
<!-- "Quirks Mode". Replacing this declaration     -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout.   -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="../image/favicon.ico" >
    <link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
    <title>CoCo! KoKo! - 普段は無くても良いけれど、ふとした時に知りたくなる場所　そんな場所を探せます！</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA75pvos1A5mkhEVzv7aLzHRSh4Aqf95VtBgycL3FDgSU7LDmu1xQuU0vY8vugTCXF59KsPQsESFe_Mw" type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        
        // クリック時、中心座標を表示（現在表示部コメントアウト）
        GEvent.addListener(map, "click", function() {
        	var center = map.getCenter();
  			//document.getElementById("message").innerHTML = center.toString();
        });
        
        // MAP生成 //
        map.setCenter(new GLatLng(34.68291096793206, 132.7587890625), 8);
        // 地図/航空写真/地図＋写真　切り替えボタン：表示
		map.addControl(new GMapTypeControl());
		// ズームバー：表示
		map.addControl(new GLargeMapControl());
		// ホイールスクロールで拡大・縮小：可
		map.enableScrollWheelZoom();
		
		// ポインタ
		var point = new GLatLng(34.68291096793206, 132.7587890625)
		// マーカー
		var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
        	var html = "<form><input type='submit' value='詳細'></form>";
        	marker.openInfoWindowHtml(html);
        });
		map.addOverlay(marker);
      }
    }
    </script>
    
  </head>

  <body onload="initialize()" onunload="GUnload()">
  	<!-- ヘッダ部 -->
  	<div id="index_header">
  		<p>
    		<img src="image/CoCoKoKo.jpg" width="400" height="168" border="1" alt="Title Logo">
    	</p>
    	<form action="/search" method="post">
    		<select name="category">
    			<option value="1">トイレ</option>
    			<option value="2">喫煙所</option>
    			<option value="3">授乳室</option>
    			<option value="4">多目的トイレ</option>
    		</select>
    		<input type="text" size="30" name="address" />
    		<input type="submit" value="これ何処？" />
    	</form>
    </div>
    <div id="index_contents">
    	<!-- サイドバー -->
	    <div id="index_sideBar">
	    	<h1>カテゴリ</h1>
	    	<a href="" alt="">トイレ</a><br />
	    	<a href="" alt="">喫煙所</a><br />
	    	<a href="" alt="">授乳室</a><br />
	    	<a href="" alt="">多目的トイレ</a><br />
	    	<h1>地域</h1>
	    	<a href="" alt="">広島市中区</a><br />
	    	<a href="" alt="">広島市西区　東部</a><br />
	    	<a href="" alt="">広島市西区　西部</a><br />
	    	<a href="" alt="">広島市南区</a><br />
	    	<a href="" alt="">広島市　その他</a><br />    	
	    </div>
	    <!-- マップ -->
	    <div id="index_map">
	    	<div id="map_canvas" style="width: 400px; height: 300px"></div>
	    	<div id="message"></div>
	    </div>
	</div>
    <!-- フッター -->
    <div id="index_footer">
    	<hr>
    	こぴーらいと　おーるらいつ　りざーぶど
    </div>
  </body>
</html>
